<template>
  <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <slot name="title"> 机票价格确认 </slot>
          </h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body" v-if="priceOfferInfo != null">
          <div class="card">
            <div class="card-header">
              已选报价项编码：{{ fareBasisCodes }}
            </div>
          </div>

          <nav>
            <div class="nav nav-tabs" id="fare-nav-tab" role="tablist">
              <template v-for="(info, index) of priceOfferInfo.segments">
                <button
                  class="nav-link"
                  :class="{'active': index === 0}"
                  :id="`nav-${index}-tab`"
                  :key="`button_${index}`"
                  data-bs-toggle="tab"
                  :data-bs-target="`#nav-${index}`"
                  type="button"
                  role="tab"
                >
                  {{ info.dport }}{{ info.aport }}
                  {{ info.flightNo }}
                  {{ info.ddate }}
                  {{ info.subclass }}
                </button>
              </template>
            </div>
          </nav>
          <div class="tab-content" id="fare-nav-tabContent">
            <template v-for="(info, index) of priceOfferInfo.segments">
              <div
                class="tab-pane fade"
                :class="{'show active': index === 0}"
                :key="`content_${index}`"
                :id="`nav-${index}`"
              >
                <table class="table table-striped caption-top">
                  <thead>
                    <tr>
                      <th>报价项编码</th>
                      <th>票价基础代码</th>
                      <th>乘客类型</th>
                      <th>票面价</th>
                      <th>税</th>
                      <th>结算价</th>
                      <th>代理费</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    <template v-for="fareInfo of info.fareInfoDtos">
                      <tr :key="fareInfo.offerItemId">
                        <td>{{ fareInfo.offerItemId }}</td>
                        <td>{{ fareInfo.fareBasisCode }}</td>
                        <td>{{ fareInfo.psgType }}</td>
                        <td>{{ fareInfo.baseAmount }}</td>
                        <td>{{ fareInfo.totalTax }}</td>
                        <td>{{ fareInfo.totalAmount }}</td>
                        <td>{{ fareInfo.totalFee }}</td>
                        <td>
                          <input
                            type="radio"
                            :id="`id_${fareInfo.offerItemId}`"
                            :name="`seg${index}_${fareInfo.psgType}`"
                            :value="fareInfo.offerItemId"
                            v-model="fareBasisCodes[index]"
                          />
                        </td>
                      </tr>
                    </template>
                  </tbody>
                </table>
                <div class="card" v-if="couponInfo !== null">
                  <div class="card-body">
                    优惠券：
                     <select class="form-select" v-model.trim="couponCodes[index]">
                        <template v-for="couponItem in couponInfo.items">
                          <option :value="couponItem.groupId" :key="couponItem.groupId">
                            {{ couponItem.ruleInfo.couponType }}-{{couponItem.faceValue}} 
                            </option>
                        </template>
                      </select>
                  </div>
                </div>
              </div>
            </template>
          </div>

        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary me-2"
            data-bs-dismiss="modal"
          >
            取消
          </button>
          <button type="button" class="btn btn-primary" @click.stop="ok()">
            确定
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { checkFlightOrderPrice, searchCoupons } from "@/api/flight";

export default {
  data() {
    return {
      resolve: "",
      reject: "",
      promise: "",

      segmentIndex: 0,
      orderId: 0,
      priceOfferInfo: null,
      couponInfo: null,
      fareBasisCodes: [],
      couponCodes: [],

      loading: false,

      myModal: null,
    };
  },
  computed: {
    username() {
      return this.$store.state.username;
    },
  },
  watch: {
    smsFormat: function (newVal) {
      this.searchSmsContent();
    },
    psgId: function () {
      this.searchSmsContent();
    },
  },
  methods: {
    modal: function (orderId) {
      this.orderId = orderId;
      this.fareBasisCodes.splice(0);
      this.priceOfferInfo = null;
      this.segmentIndex = 0;
      this.showModal();

      checkFlightOrderPrice(this.orderId, (v) => this.showFlightPriceOffers(v));
      //searchCoupons(this.orderId, v => this.showCoupons(v));

      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
      return this.promise;
    },
    ok: function () {
      this.hideModal();
      console.log(this.fareBasisCodes);
      this.resolve({
        "itemCodes[]": this.fareBasisCodes,
        "couponCodes[]": this.couponCodes,
        shoppingResponseId: this.priceOfferInfo.shoppingResponseId,
      });
    },
    showFlightPriceOffers: function (v) {
      this.fareBasisCodes.splice(0);
      console.log(v);
      this.priceOfferInfo = v;
      if (v.errcode > 0) {
        this.showErrMsg(v.errmsg, "danger");
        this.hideModal();
      }
    },
    showCoupons: function (v) {
      console.log(v);
      this.couponInfo = v;
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    commonShowMessage: function (v) {
      if (v.status !== "OK") {
        this.showErrMsg("失败：" + v.errmsg, "danger");
      } else {
        if (v.desc !== "") {
          this.showErrMsg(v.desc);
        } else {
          this.showErrMsg("操作成功");
        }
      }
    },
    showModal: function () {
      this.getMyModal().show();
    },
    hideModal: function () {
      this.getMyModal().hide();
    },
    getMyModal: function () {
      if (this.myModal === null) {
        let myModalEl = $(this.$el).get(0);
        this.myModal = new bootstrap.Modal(myModalEl);
      }

      return this.myModal;
    },
  },
};
</script>
